import React from 'react'
import FlatList from "react"
import Head from 'next/head'
import {Col, Divider, Input, Layout, List, Pagination, Row,Image,Tag,Card} from 'antd'
import '../components/index.css'

import reqwest from 'reqwest';


const {Header, Footer, Content} = Layout;
const {Search} = Input;


class LoadMoreList extends React.Component {
    state = {
        current: 1,
        list: [],
        total:0

    };

    onChange = page => {
        console.log(page);
        this.setState({
            current: page,
        });
        this.getData(page);
    };

    componentDidMount() {
        this.getData(1);
    }

    getData = (page) => {
        reqwest({
            url: `http://47.94.17.141/renren-admin/api/evaluation/pagelist?page=${page}&limit=100`,
            type: 'json',
            method: 'get',
            contentType: 'application/json',
            success: res => {
                this.setState({
                        initLoading: false,
                        data: res.page.list,
                        list: res.page.list,
                        total: res.page.totalCount,
                    }
                );
                console.log(res)
            },
        });
    };

    render() {
        return (
            <>
                <Head>
                    <title>readthis</title>
                </Head>
                <Layout>
                    <div className="head">
                        <Row className="top-row" gutter={24}>
                            <Col span={2} className="top-col">
                                
                            </Col>
                            <Col span={16} className="top-col ">
                            <Header className="toptitle">
                                    <img width="173px" src="/src/logo.png" alt="" />
                                </Header>
                               {/* * <Search className="search" placeholder="输入要搜索的书名或推荐人" style={{width: 500}}
                                        onSearch={value => console.log(value)} enterButton/>* */}
                            </Col>
                            <Col span={6} className="top-col">
                                <div className="email">
                                  { /* *  <span>提意见或什么的</span>
                                    <br/>
                                    <span>axuxuanze@gmail.com</span> * */}
                                </div>
                            </Col>
                        </Row>
                    </div>


                    <Content>
                        <Row>

                            <Col span={2} className="content-col">
                            </Col>

                            <Col span={16} className="content-col" style={{background: "#FFFFFF",postiion:"relative"}}>

                                <div>
                                    <List
                                        className="demo-loadmore-list"
                                        itemLayout="horizontal"
                                        dataSource={this.state.list}
                                        renderItem={item => (
                                            <List.Item>
                                                <div className="content-list">
                                                    <div className="content-list-top">
                                                        <div className="content-list-img">
                                                            <a href={item.recomBookEntity.linkUrl} target="_blank">
                                                                <img width="100px" src={item.recomBookEntity.bannerUrl}
                                                                     alt={item.recomBookEntity.title}/>
                                                            </a>
                                                        </div>

                                                        <div className="content-list-content">
                                                            <a className="recwords" float="left" 
                                                               rel="noopener noreferrer"
                                                               dangerouslySetInnerHTML={{__html: item.content}}>
                                                            </a>

                                                            <div className="tips">
                                                                <span>来自:&nbsp; <span
                                                                    className="recomSource">{item.recommandSource}</span></span>
                                                                <span>推荐于{item.recommendTime}</span>
                                                                <span><a href={item.sourceUrl} target="_blank" >穿越去源地址</a></span>
                                                            </div>

                                                            <div className="celebrity">
                                                                <div  className="personalnametag">
                                                                    <span className="personalname"
                                                                    >{item.recomUserEntity.name}</span>
                                                                    <span className="font12px">{item.recomUserEntity.tag}</span>
                                                                    </div>
                                                                <div className="personalurls">
                                                                    <List   grid={{ gutter: 8, column: 8 }}
                                                                        dataSource={JSON.parse(item.recomUserEntity.siteUrls)}
                                                                        renderItem={items => (
                                                                            <List.Item >
                                                                                <span>
                                                                            <a className="font12px"
                                                                                href={items.url}
                                                                                target="_blank">{items.name}</a>
                                                                                </span>
                                                                            </List.Item>
                                                                        )}
                                                                        />
                                                                 
                                                                    </div> 
                                                                </div>
                                                           
                                                        </div>
                                                    </div>

                                                    <div className="source">
                                                        <span href={item.recomBookEntity.linkUrl}
                                                              className="bookTitle">{item.recomBookEntity.title} </span>
                                                        <span href={item.recomBookEntity.linkUrl}
                                                              className="bookSubtitle"> {item.recomBookEntity.subTitle}</span>
                                                    </div>
                                                </div>
                                            
                                            </List.Item>
                                        )}
                                    />
                                </div>
                                 <Divider />
                                <Pagination className="pagination center" current={this.state.current} onChange={this.onChange} total={this.state.total}
                                            pageSize={6} hideOnSinglePage="true"/>

                            </Col>

                            <Col span={6} className="content-col">
                                <div className="right-content-col">
                                    <span className="bolder font14px">LessReads, read less!</span>
                                    <br />
                                    <br />
                                    <span>当信息太多的时候，获取更少但更有价值的信息，反而成了个人在信息社会中必须掌握的一项能力。LessReads想要做的事情，就是在这方面能够给大家一点帮助!</span>
                                    <br />
                                    <br />
                                    <span>现在的LessReads，还是一个测试版本，有幸能够遇到你的关注。如果你对LessReads有任何意axuxuanze@gmail.com见或想法，请发邮件给我们，或者加入我们的讨论群，帮我们共建LessReads！</span>
                                    <br />
                                    <br />
                                    <span>加入微信群，请加：<span className="bolder">xuxuan_0584</span> 入群</span>
                                    <br />
                                    <span>电子邮件请发送到：<span className="bolder">axuxuanze@gmail.com</span> </span>


                                </div>
                            </Col>

                        </Row>,

                    </Content>

                    <Footer  style={{ textAlign: 'center' ,fontWeight:"light",fontSize:"10px"}}>这是 Version 1.0，但希望你能喜欢</Footer>

                </Layout>
            </>
        )
    }
}

export default LoadMoreList
